import React from 'react'
import './index.less'
import { DatePicker, TimePicker, Icon } from 'antd'
import moment from 'moment'
import http from 'libs/http'
import { formatDate } from 'libs/utils';

class SubscribeModal extends React.Component {
  state = {
    date: '',
    time: '',
  }

  // 确认立即预约操作
  onSubmit = () => {
    const { date, time } = this.state
    if(date && time){
      const { courseData: {courseId} } = this.props
      // const dateList = JSON.stringify([date.format('YYYY-MM-DD HH:mm:ss')]);
      // const dateStr = date.format('YYYY-MM-DD HH:mm:ss')
      const dateStr = formatDate('YYYY-MM-DD', date)
      const timeStr = formatDate('hh:mm:ss', time)
      http.post('/student/business/appointment', { courseId, dateStr: `${dateStr} ${timeStr}` }, {}, true).then(res => {
        this.props.handleSubscribe()
      })
    }
  }

  onChange = type => value => {
    this.setState({ [type]: value })
    if(type == 'date'){
      this.refs.timePicker.state.value = null;
    }
  }
  
  render() {
    const { showModal, courseData, closeSubscribeModal, } = this.props
    const { courseId, courseName } = courseData;
    const nowTime = moment(new Date()).format('YYYY-MM-DD 08:00:00');
    return (
      showModal && <div className="subscribe-modal-container">
        <div className="subscribe-modal">
          <span onClick={closeSubscribeModal} className="close"></span>
          <div className="logo">
            <i></i>
            <span>改变世界，从学习开始</span>
          </div>
          {/* <p>上课流程</p> */}
          <div className="step-wrap">
            <span>预约上课时间</span>
            <span>课程顾问确认</span>
            <span>线上免费试听</span>
          </div>
          <div className="subscribe-wrap">
            <div className="course-name"><span>课程名称</span>{courseName}</div>
            <div className="course-date"><span>免费试听</span>
              {/* <DatePicker
                // getCalendarContainer={triggerNode => triggerNode.parentNode}
                style={{ width: 200, marginRight: 20 }}
                defaultPickerValue={moment(nowTime)}
                // showToday={true}
                size="large"
                format="YYYY-MM-DD"
                placeholder="选择日期"
                disabledDate={(current) => {
                  return current && current < moment().startOf('day');
                }}
                showTime={{
                  disabledHours: () => {
                    return [0, 1, 2, 3, 4, 5, 6, 7, 22, 23];
                  },
                  disabledMinutes: () => {
                    const disarr = [];
                    for (let i = 1; i < 61; i++) {
                      if (i === 30) continue;
                      disarr.push(i);
                    }
                    return disarr;
                  },
                  disabledSeconds: () => {
                    const disarr = [];
                    for (let i = 1; i < 61; i++) {
                      disarr.push(i);
                    }
                    return disarr;
                  },
                  hideDisabledOptions: true
                }}
                onChange={this.onChange}
              /> */}
              <DatePicker
                // getCalendarContainer={triggerNode => triggerNode.parentNode}
                style={{ width: 200, marginRight: 20 }}
                defaultPickerValue={moment(nowTime)}
                // showToday={true}
                size="large"
                format="YYYY-MM-DD"
                placeholder="选择日期"
                disabledDate={(current) => {
                  const date = new Date();
                  const hour = date.getHours();
                  const minute = date.getMinutes();
                  if((hour > 21) || (hour == 21 && minute >= 30)){
                    return current < moment().endOf('day');
                  }
                  return current && current < moment().startOf('day');
                }}
                onChange={this.onChange('date')}
              />
              <TimePicker
                inputReadOnly={true}
                ref="timePicker"
                style={{ width: 200 }}
                size="large"
                disabledHours={() => {
                  const date = this.state.date;
                  if(date > moment().endOf('day')){
                    return [0, 1, 2, 3, 4, 5, 6, 7, 22, 23];
                  }
                  const nowdate = new Date();
                  const hour = nowdate.getHours();
                  const minute = nowdate.getMinutes();
                  let disabledHoursArr = [0, 1, 2, 3, 4, 5, 6, 7, 22, 23];
                  for(let i = 8; i < hour; i++){
                    disabledHoursArr.push(i);
                  }
                  if(minute >= 30){
                    disabledHoursArr.push(hour);
                  }
                  return disabledHoursArr;
                }}
                disabledMinutes={() => {
                  const disarr = [];
                  for (let i = 1; i < 61; i++) {
                    if (i === 30) continue;
                    disarr.push(i);
                  }
                  return disarr;
                }}
                disabledSeconds={() => {
                  const disarr = [];
                  for (let i = 1; i < 61; i++) {
                    disarr.push(i);
                  }
                  return disarr;
                }}
                hideDisabledOptions={true}
                onChange={this.onChange('time')}
              />
            </div>
          </div>
          <div className="btn-wrap">
            <span className='cancel-btn' onClick={closeSubscribeModal}>取消</span>
            <span className="ok-btn" onClick={this.onSubmit}>立即预约</span>
          </div>

        </div>
        <div className="mask"></div>
      </div>
    )
  }
}

export default SubscribeModal